<!doctype html>
<html lang="en">
<head>
    <title>Grid - Attributes Within Data</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            // dom
            $("#demo-dom").wijgrid( { readAttributesFromData: true });

            // array
            $("#demo-array").wijgrid({
                readAttributesFromData: true,
                data: [
                   [ ["00", { style: "background-color: #FFA500" } ], ["01", { style: "background-color: #9ACD32" } ] ],
                   [ ["10", { style: "background-color: #4169E1" } ], ["11", { style: "background-color: #9370D8" } ] ]
                ],
                columns: [
                  { headerText: "Column0" }, { headerText: "Column1" }
                ]
            });

            // hash
            $("#demo-hash").wijgrid({
                readAttributesFromData: true,
                data: [
                  { Column0: ["00", { style: "background-color: #FFA500" } ], Column1: ["01", { style: "background-color: #9ACD32" } ] },
                  { Column0: ["10", { style: "background-color: #4169E1" } ], Column1: ["11", { style: "background-color: #9370D8" } ] }
                ]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Attributes Within Data</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <p>DOM table:</p>
            <table id="demo-dom">
              <thead>
                <tr>
                  <th>Column0</th><th>Column1</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td style="background-color: #FFA500">00</td><td style="background-color: #9ACD32">01</td>
                </tr>
                <tr>
                  <td style="background-color: #4169E1">10</td><td style="background-color: #9370D8">11</td>
                </tr>
              </tbody>
            </table>

            <p>Array:</p>
            <table id="demo-array">
            </table>

            <p>Hash:</p>
            <table id="demo-hash">
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
            <div class="footer demo-description">
                <p>
                   This sample shows how to pass a list of DOM attributes within data into wijgrid using the readAttributesFromData option.
                </p>
            </div>
        </div>
    </div>
</body>
</html>
